import { t } from 'i18next'
import React, { FC } from 'react'
import { RowRendererProps } from './translator'
import { RightWrap, ListItemGhost } from '../../components'
import { ListEmpty, ListTop, ListBody } from '@/components/List'
import { Droppable, Draggable, DragDropContextProvider } from '@/plugins/dnd'
import { FixedSizeList as List } from 'react-window'
import { ListItem } from './ListItem'
import { Wrap, Label, Separator, SeparatorDot } from './style'
import { useData } from './hooks'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Select } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { useSelectStore } from './store'
import { revert_mt } from '@/api/manager/mt'

const rowRenderer = React.memo(({ data: source, index, style }: RowRendererProps) => {
	const { list, from } = source
	const rowData = list[index]
	const listItemProps = {
		item: list[index],
		index: index,
		from,
	}
	const dataTransfer = () => {
		return {
			data: {
				mt: revert_mt(rowData.mcc),
				select_view: {},
			},
			from: 'select_view',
		}
	}
	return (
		<Draggable
			style={style}
			index={index}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
		>
			<ListItem {...listItemProps} />
		</Draggable>
	)
})
const MtSelect: FC = () => {
	const { topActions, handleDropDes, handleDropSrc, handleReturnBack } = useData()
	const { src_account_list, des_account_list, media_mode, mediaModeList, updateMode } = useSelectStore(
		(state) => ({
			media_mode: state.media_mode,
			des_account_list: state.des_account_list,
			mediaModeList: state.mediaModeList,
			src_account_list: state.src_account_list,
			updateMode: state.updateMode,
		}),
		shallow
	)
	return (
		<>
			<RightWrap title={t('终端选看')} onBack={handleReturnBack}>
				<ListTop title={t('选看终端列表')} actions={topActions} />
				<ListBody isHideOrder={true} _height={190}>
					<AutoSizer>
						{({ width, height }) => (
							<DragDropContextProvider>
								<Droppable onDrop={handleDropDes}>
									{(setDroppableRef) =>
										des_account_list.length > 0 ? (
											<List
												width={width}
												height={height}
												itemCount={des_account_list.length}
												itemSize={32}
												itemData={{
													list: des_account_list,
													from: 'select-list-des',
												}}
												outerRef={setDroppableRef}
												itemKey={(index, data) => data.list[index].mtKey}
											>
												{rowRenderer}
											</List>
										) : (
											<ListEmpty width={width} height={height} outerRef={setDroppableRef} />
										)
									}
								</Droppable>
							</DragDropContextProvider>
						)}
					</AutoSizer>
				</ListBody>
				<SeparatorDot></SeparatorDot>
				<Wrap height={45}>
					<Label>{t('被选看终端列表')}</Label>
					<Select
						panelClassName="select-media-select__i18n"
						width={100}
						options={mediaModeList}
						value={media_mode}
						onChange={(e, v) => {
							updateMode(v)
							// startSelect()
						}}
					/>
				</Wrap>
				<Separator></Separator>
				<DragDropContextProvider>
					<Droppable onDrop={handleDropSrc}>
						{(setDroppableRef) =>
							src_account_list.length > 0 ? (
								<List
									width={280}
									height={80}
									itemCount={src_account_list.length}
									itemSize={32}
									itemData={{
										list: src_account_list,
										from: 'select-list-src',
									}}
									outerRef={setDroppableRef}
									itemKey={(index, data) => data.list[index].mtKey}
								>
									{rowRenderer}
								</List>
							) : (
								<ListEmpty width={280} height={80} outerRef={setDroppableRef} />
							)
						}
					</Droppable>
				</DragDropContextProvider>
				<SeparatorDot></SeparatorDot>
			</RightWrap>
		</>
	)
}
export default MtSelect
